import 'dart:ui';
import 'package:BMI/iconfont.dart';
import 'package:flutter/material.dart';
import 'package:BMI/global.dart';
import 'package:flutter/rendering.dart';

class ContentPage extends StatefulWidget {
  ContentPage({Key key, this.data}) : super(key: key);
  final data;

  @override
  _ContentPageState createState() => _ContentPageState();
}

class _ContentPageState extends State<ContentPage> {
  Color primaryColor = Color(0xFF67C9FE);
  Color primaryColor1 = Color(0xFF6771FE);

  double heightSliderValue = 0.5;
  double weightSliderValue = 0.5;
  bool isMale = true;
  double bmiValue = 0;
  List<String> tips = [
    '您太瘦了，您应注意过瘦影响，合理健康饮食！',
    '当前身高您的体重非常标准哦！',
    '超重了哦！多多运动，合理健康饮食！',
    '您应注意过胖影响，合理健康饮食！',
  ];
  List<Color> colors = [
    Color(0xFFC6B901),
    Color(0xFF7BC631),
    Color(0xFFC6B901),
    Color(0xFFFF6F00)
  ];

  getTip() {
    if (bmiValue <= 18.4) return tips[0];
    if (18.5 < bmiValue && bmiValue <= 23.9) return tips[1];
    if (24.0 < bmiValue && bmiValue <= 27.9) return tips[2];
    if (28.0 <= bmiValue) return tips[3];
  }

  getColor() {
    if (bmiValue <= 18.4) return colors[0];
    if (18.5 < bmiValue && bmiValue <= 23.9) return colors[1];
    if (24.0 < bmiValue && bmiValue <= 27.9) return colors[2];
    if (28.0 <= bmiValue) return colors[3];
  }

  @override
  void initState() {
    super.initState();
  }

  double getBMI() {
    return (weightSliderValue * 140) /
        (((heightSliderValue * 240) / 100) * ((heightSliderValue * 240) / 100));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            colors: [
              primaryColor,
              primaryColor1,
            ],
          ),
        ),
        child: SingleChildScrollView(
          child: Container(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Container(
                  height: MediaQuery.of(context).size.height,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.end,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: <Widget>[
                      Container(
                        padding: EdgeInsets.only(top: Global.paddingTop + 20),
                        child: Column(
                          children: [
                            Text(
                              '小助手 - BMI体重计算',
                              style: TextStyle(
                                color: Global.backgroundColor,
                                fontSize: 22,
                                fontWeight: FontWeight.w200,
                              ),
                            ),
                            Container(
                              padding: EdgeInsets.fromLTRB(40, 40, 40, 50),
                              child: Row(
                                mainAxisAlignment:
                                    MainAxisAlignment.spaceBetween,
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  InkWell(
                                    onTap: () {
                                      setState(() {
                                        isMale = true;
                                        primaryColor = Color(0xFF67C9FE);
                                        primaryColor1 = Color(0xFF6771FE);
                                      });
                                    },
                                    child: Container(
                                      padding:
                                          EdgeInsets.fromLTRB(40, 10, 40, 10),
                                      decoration: BoxDecoration(
                                        color: isMale
                                            ? Global.backgroundColor
                                            : Global.backgroundColor
                                                .withOpacity(.3),
                                        borderRadius: BorderRadius.circular(50),
                                      ),
                                      child: Row(
                                        children: [
                                          Icon(
                                            IconFont.male,
                                            size: 20,
                                            color: isMale
                                                ? primaryColor
                                                : Global.backgroundColor,
                                          ),
                                          SizedBox(width: 5),
                                          Text(
                                            '男性',
                                            style: TextStyle(
                                              color: isMale
                                                  ? primaryColor
                                                  : Global.backgroundColor,
                                              fontWeight: FontWeight.w500,
                                              fontSize: 14,
                                            ),
                                          ),
                                        ],
                                      ),
                                    ),
                                  ),
                                  InkWell(
                                    onTap: () {
                                      setState(() {
                                        isMale = false;
                                        primaryColor = Color(0xFFFE67A1);
                                        primaryColor1 = Color(0xFFFE6776);
                                      });
                                    },
                                    child: Container(
                                      padding:
                                          EdgeInsets.fromLTRB(40, 10, 40, 10),
                                      decoration: BoxDecoration(
                                        color: !isMale
                                            ? Global.backgroundColor
                                            : Global.backgroundColor
                                                .withOpacity(.3),
                                        borderRadius: BorderRadius.circular(50),
                                      ),
                                      child: Row(
                                        children: [
                                          Icon(
                                            IconFont.sex_famale,
                                            size: 20,
                                            color: !isMale
                                                ? primaryColor
                                                : Global.backgroundColor,
                                          ),
                                          SizedBox(width: 5),
                                          Text(
                                            '女性',
                                            style: TextStyle(
                                              color: !isMale
                                                  ? primaryColor
                                                  : Global.backgroundColor,
                                              fontWeight: FontWeight.w500,
                                              fontSize: 14,
                                            ),
                                          ),
                                        ],
                                      ),
                                    ),
                                  ),
                                ],
                              ),
                            ),
                            SizedBox(height: 20),
                            Row(
                              children: [
                                SizedBox(width: 25),
                                Text(
                                  '身高：' +
                                      (heightSliderValue * 240)
                                          .toStringAsFixed(0)
                                          .toString() +
                                      'cm',
                                  style: TextStyle(
                                    color: Global.backgroundColor,
                                    fontWeight: FontWeight.w600,
                                    fontSize: 17,
                                  ),
                                ),
                              ],
                            ),
                            SliderTheme(
                              data: SliderTheme.of(context).copyWith(
                                activeTrackColor: Global.fontColor
                                    .withOpacity(.2), //进度条滑块左边颜色
                                inactiveTrackColor: Global.fontColor
                                    .withOpacity(.1), //进度条滑块右边颜色
                                thumbColor: Global.backgroundColor, //滑块颜色
                                overlayColor: Colors.transparent, //滑块拖拽时外圈的颜色
                                trackHeight: 3, //进度条宽度
                                thumbShape: RoundSliderThumbShape(
                                  enabledThumbRadius: 10, //滑块大小
                                ),
                              ),
                              child: Slider(
                                onChanged: (v) {
                                  setState(() => {heightSliderValue = v});
                                },
                                value: heightSliderValue,
                                max: 1,
                                min: 0,
                              ),
                            ),
                            SizedBox(height: 30),
                            Row(
                              children: [
                                SizedBox(width: 25),
                                Text(
                                  '体重：' +
                                      (weightSliderValue * 140)
                                          .toStringAsFixed(0)
                                          .toString() +
                                      'kg',
                                  style: TextStyle(
                                    color: Global.backgroundColor,
                                    fontWeight: FontWeight.w600,
                                    fontSize: 17,
                                  ),
                                ),
                              ],
                            ),
                            SliderTheme(
                              data: SliderTheme.of(context).copyWith(
                                activeTrackColor: Global.fontColor
                                    .withOpacity(.2), //进度条滑块左边颜色
                                inactiveTrackColor: Global.fontColor
                                    .withOpacity(.1), //进度条滑块右边颜色
                                thumbColor: Global.backgroundColor, //滑块颜色
                                overlayColor: Colors.transparent, //滑块拖拽时外圈的颜色
                                trackHeight: 3, //进度条宽度
                                thumbShape: RoundSliderThumbShape(
                                  enabledThumbRadius: 10, //滑块大小
                                ),
                              ),
                              child: Slider(
                                onChanged: (v) {
                                  setState(() => {weightSliderValue = v});
                                },
                                value: weightSliderValue,
                                max: 1,
                                min: 0,
                              ),
                            )
                          ],
                        ),
                      ),
                      Container(
                        child: Column(
                          children: [
                            Container(
                              height: 80,
                              decoration: BoxDecoration(
                                image: DecorationImage(
                                  image: AssetImage("assets/images/border.png"),
                                  repeat: ImageRepeat.noRepeat,
                                  fit: BoxFit.fitWidth,
                                ),
                              ),
                              child: Row(
                                mainAxisAlignment: MainAxisAlignment.end,
                                crossAxisAlignment: CrossAxisAlignment.center,
                                children: [
                                  FloatingActionButton(
                                    child: Icon(
                                      Icons.arrow_right_alt,
                                      size: 40,
                                    ),
                                    backgroundColor: primaryColor,
                                    onPressed: () {
                                      setState(() {
                                        bmiValue = getBMI();
                                      });
                                    },
                                    mini: false,
                                  ),
                                  SizedBox(width: 30),
                                ],
                              ),
                            ),
                            bmiValue == 0
                                ? Container(
                                    padding: EdgeInsets.all(30),
                                    decoration: BoxDecoration(
                                      color: Global.backgroundColor,
                                    ),
                                    child: Column(
                                      children: [
                                        Text(
                                          '身体质量指数 (Body Mass Index, 简称BMI), 亦称克托莱指数, 是目前国际上常用的衡量人体胖瘦程度以及是否健康的一个标准。BMI 值超标，意味着你必须减肥了。',
                                          style: TextStyle(
                                            color: Global.fontSecondColor
                                                .withOpacity(.5),
                                            fontSize: 13,
                                            fontWeight: FontWeight.w500,
                                          ),
                                        ),
                                        SizedBox(height: 10),
                                        Text(
                                          '*本计算器结果不适用与儿童与孕妇*',
                                          style: TextStyle(
                                            color: Global.fontSecondColor
                                                .withOpacity(.7),
                                            fontSize: 12,
                                            fontWeight: FontWeight.w600,
                                            fontStyle: FontStyle.italic,
                                          ),
                                        ),
                                        SizedBox(height: 20),
                                      ],
                                    ),
                                  )
                                : Container(
                                    width: MediaQuery.of(context).size.width,
                                    padding: EdgeInsets.all(30),
                                    decoration: BoxDecoration(
                                      color: Global.backgroundColor,
                                    ),
                                    child: Column(
                                      children: [
                                        Text(
                                          'BMI：' + bmiValue.toStringAsFixed(0),
                                          style: TextStyle(
                                            color: primaryColor,
                                            fontSize: 62,
                                            fontWeight: FontWeight.w600,
                                            fontStyle: FontStyle.italic,
                                          ),
                                        ),
                                        Text(
                                          getTip(),
                                          style: TextStyle(
                                            color: getColor(),
                                            fontSize: 12,
                                            fontWeight: FontWeight.w600,
                                            fontStyle: FontStyle.italic,
                                          ),
                                        ),
                                        SizedBox(height: 20),
                                      ],
                                    ),
                                  )
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}
